<template>
  <ul class="nav">
    <li
      class="nav-item"
      v-for="item in navList"
      :key="item.title"
      @click="handleNav(item)"
    >
      <i :class="'icon icon-' + item.icon"></i>
      <div class="nav-title">{{ item.title }}</div>
    </li>
  </ul>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const state = reactive({
      navList: [
        {
          title: "政策汇编",
          icon: "policy",
          // url: "/article/policy",
          url:"/article/level"
        },
        {
          title: "职业规划",
          icon: "online",
          url: "https://daquan.yl1001.com/zhiye",
        },
        {
          title: "招考信息",
          icon: "news",
          url: "/article/pecruiment",
        },
        {
          title: "问卷调查",
          icon: "onsite",
          // url: "/article/questionnaire",
          url:"https://www.wjx.cn/vm/ra2Badt.aspx"
        },
      ],
    });
    const handleNav = (item) => {
      const url = item.url;
      if (url) {
        if (url.includes("http")) {
          // location.href = url;
          window.open(url, "_blank");
        } else {
          router.push(url);
        }
      }
    };
    onMounted(() => {});

    return {
      ...toRefs(state),
      handleNav,
    };
  },
};
</script>
<style lang="scss" scoped>
.nav {
  display: flex;
  flex-wrap: wrap;
  margin: 16px;
  padding: 6px 16px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.1);

  &-item {
    flex: 1;
    min-width: 50px;
    padding: 10px 0;
    text-align: center;
  }

  &-title {
    margin-top: 8px;
    font-size: 12px;
    color: #333;
  }
}
.icon {
  width: 40px;
  height: 40px;
}
</style>